<template>
  <el-card class="user-card">
    <template>
      <el-tabs v-model="activetab">
        <el-tab-pane label="角色权限管理" name="1">
          <el-table
              :data="permissionTable"
              style="width: 100%"
              border>
            <el-table-column prop="id" label="序号" width="50"></el-table-column>
            <el-table-column prop="role" label="角色" width="100"></el-table-column>
            <el-table-column label="权限">
              <template v-slot:default="scope">
                <el-checkbox-group v-model="scope.row.selected">
                  <el-checkbox v-for="(permission, index) in scope.row.permissions" :key="index" :label="permission.value"></el-checkbox>
                </el-checkbox-group>
              </template>
            </el-table-column>
          </el-table>
          <div class="button_container_p">
            <el-button type="primary" @click="create_role" plain>创建角色</el-button>
            <el-button type="primary" @click="save" >保存</el-button>
            <el-button type="info" @click="cancel" plain>取消</el-button>
          </div>
          <el-dialog title="创建角色" :visible.sync="role_dialogVisible" width="30%" center>
            <el-form :model="role_form" label-width="80px">
              <el-form-item label="角色">
                <el-input v-model="role_form.role" placeholder="请输入角色"></el-input>
              </el-form-item>
              <el-form-item label="权限">
                <el-checkbox-group v-model="role_form.permissions">
                  <el-checkbox v-for="(permission, index) in permissionTable[0].permissions" :key="index" :label="permission.value"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="role_dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="role_dialogVisible = false">确 定</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="人员管理" name="2">
          <el-table
              :data="userTable"
              style="width: 100%"
              border>
            <el-table-column prop="id" label="序号" width="50"></el-table-column>
            <el-table-column prop="name" label="姓名" width="100"></el-table-column>
            <el-table-column prop="account" label="账号" width="150"></el-table-column>
            <el-table-column label="密码" width="100">******</el-table-column>
            <el-table-column prop="phone" label="手机号码" width="150"></el-table-column>
            <el-table-column prop="mail" label="邮箱" width="250"></el-table-column>
            <el-table-column prop="role" label="角色"></el-table-column>
          </el-table>
          <div class="button_container_u">
            <el-button type="primary" @click="create_user" plain>创建人员</el-button>
            <el-button type="primary" @click="save" >保存</el-button>
            <el-button type="info" @click="cancel" plain>取消</el-button>
          </div>
          <el-dialog title="创建人员" :visible.sync="user_dialogVisible" width="40%" center>
            <el-form :model="user_form" label-width="80px">
              <el-form-item label="姓名">
                <el-input v-model="user_form.name" placeholder="请输入姓名"></el-input>
              </el-form-item>
              <el-form-item label="账号">
                <el-input v-model="user_form.account" clearable placeholder="请输入账号"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="user_form.password" placeholder="请输入密码" show-password clearable></el-input>
              </el-form-item>
              <el-form-item label="确认密码">
                <el-input v-model="user_form.password_confirm" placeholder="请再次输入密码" show-password></el-input>
              </el-form-item>
              <el-form-item label="手机号码">
                <el-input v-model="user_form.phone" placeholder="请输入手机号码"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="user_form.mail" placeholder="请输入邮箱"></el-input>
              </el-form-item>
              <el-form-item label="角色">
                <el-select v-model="user_form.role"  filterable allow-create clearable placeholder="请选择角色">
                  <el-option
                      v-for="item in Options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="user_dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="user_dialogVisible = false">确 定</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>
      </el-tabs>
    </template>
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      activetab:1,
      role_dialogVisible:false,
      user_dialogVisible:false,
      permissionTable:[
        {
          id:1,
          role:'生产主管',
          permissions:[
            { value: '设备入库', selected: true },
            { value: '设备出库', selected: true },
            { value: '设备退货', selected: true },
            { value: '设备维修', selected: true },
            { value: '库存返工', selected: false }
          ],
          selected:['设备入库', '设备出库','设备退货', '设备维修']
        },
        {
          id:2,
          role:'文员',
          permissions:[
            { value: '设备入库', selected: false },
            { value: '设备出库', selected: false },
            { value: '设备退货', selected: false },
            { value: '设备维修', selected: false },
            { value: '库存返工', selected: true }
          ],
          selected:['库存返工']
        },
        {
          id:3,
          role:'生管',
          permissions:[
            { value: '设备入库', selected: false },
            { value: '设备出库', selected: true },
            { value: '设备退货', selected: true },
            { value: '设备维修', selected: false },
            { value: '库存返工', selected: false }
          ],
          selected:['设备出库','设备退货']
        },
        {
          id:4,
          role:'品管经理',
          permissions:[
            { value: '设备入库', selected: true },
            { value: '设备出库', selected: true },
            { value: '设备退货', selected: true },
            { value: '设备维修', selected: true },
            { value: '库存返工', selected: true }
          ],
          selected:['设备入库', '设备出库','设备退货', '设备维修','库存返工']
        },
        {
          id:5,
          role:'仓管员',
          permissions:[
            { value: '设备入库', selected: true },
            { value: '设备出库', selected: true },
            { value: '设备退货', selected: false },
            { value: '设备维修', selected: false },
            { value: '库存返工', selected: false }
          ],
          selected:['设备入库', '设备出库']
        },
        {
          id:6,
          role:'生产助理',
          permissions:[
            { value: '设备入库', selected: true },
            { value: '设备出库', selected: true },
            { value: '设备退货', selected: false },
            { value: '设备维修', selected: false },
            { value: '库存返工', selected: false }
          ],
          selected:['设备入库', '设备出库']
        },
        {
          id:7,
          role:'主管',
          permissions:[
            { value: '设备入库', selected: false },
            { value: '设备出库', selected: false },
            { value: '设备退货', selected: true },
            { value: '设备维修', selected: true },
            { value: '库存返工', selected: false }
          ],
          selected:['设备退货', '设备维修']
        },
        {
          id:8,
          role:'组长',
          permissions:[
            { value: '设备入库', selected: false },
            { value: '设备出库', selected: true },
            { value: '设备退货', selected: false },
            { value: '设备维修', selected: true },
            { value: '库存返工', selected: false }
          ],
          selected:['设备出库','设备维修']
        },
        {
          id:9,
          role:'生产经理',
          permissions:[
            { value: '设备入库', selected: true },
            { value: '设备出库', selected: true },
            { value: '设备退货', selected: true },
            { value: '设备维修', selected: true },
            { value: '库存返工', selected: true }
          ],
          selected:['设备入库', '设备出库','设备退货', '设备维修','库存返工']
        }
      ],
      userTable:[
        {
          id:1,
          name:'张三',
          account:'zhangsan',
          password:'123456',
          phone:'12345678901',
          mail:'12345678901@qq.com',
          role:'生产主管'
        },
        {
          id:2,
          name:'李四',
          account:'lisi',
          password:'123456',
          phone:'12345678901',
          mail:'12345678901@qq.com',
          role:'文员'
        },
        {
          id:3,
          name:'王五',
          account:'wangwu',
          password:'123456',
          phone:'12345678901',
          mail:'12345678901@qq.com',
          role:'生管'
        }
      ],
      role_form:{
        role:'',
        permissions:[]
      },
      options:[
        { value:'生产主管', label:'生产主管'},
        { value:'文员', label:'文员'},
        { value:'生管', label:'生管'},
        { value:'品管经理', label:'品管经理'},
        { value:'仓管员', label:'仓管员'},
        { value:'生产助理', label:'生产助理'},
        { value:'主管', label:'主管'},
        { value:'组长', label:'组长'},
        { value:'生产经理', label:'生产经理'}
      ],
      user_form:{
        name:'',
        account:'',
        password:'',
        password_confirm:'',
        phone:'',
        mail:'',
        role:''
      },
    };
  },
  methods: {
    create_role(){
      this.role_dialogVisible = true;
    },
    create_user(){
      this.user_dialogVisible = true;
    },
  },
};
</script>
<style lang="less" scoped>
.button_container_p{
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
  margin-left: 20px;
}
.button_container_u{
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
  margin-left: 20px;
}
</style>